<template>
	<view class="page">
		<CustomNav :isBack="true" :topBgColor="topBgColor" title="个人资料"></CustomNav>
		<view class="user-block" :style="'margin-top:'+mt">
			<view class="avatar-block">
				<image class="avatar" src="/static/images/avatar.png"></image>
				<image class="upload-avatar" src="/static/images/upload.png"></image>
			</view>
			<view class="info-item">
				<view class="label">昵称</view>
				<input :value="'逃命的包子'" class="form" placeholder="请输入昵称" placeholder-class="inputPlaceholder"/>
			</view>
			<view class="info-item">
				<view class="label">手机号</view>
				<input :value="18298702023" class="form" placeholder="请输入手机号" placeholder-class="inputPlaceholder"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				topBgColor:'rgba(0,0,0,0)',
			}
		},
		computed:{
			
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		overflow: hidden;
		height: 100%;
		background-image: linear-gradient(to bottom, #68C759, #F8F8F8 400px, #F8F8F8 400px, #F8F8F8);
		background-repeat: no-repeat;
		.user-block{
			width: $content-width;
			margin: 0 auto;
			background: #fff;
			border-radius: 8px;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.avatar-block{
				position: relative;
				margin-bottom: 30rpx;
				.avatar{
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}
				.upload-avatar{
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right:6rpx;
					bottom:6rpx;
				}
			}
			.info-item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 40rpx 0;
				font-size: 28rpx;
				border-bottom: 1px solid #efefef;
				.label{
					width: 200rpx;
				}
				.form{
					flex-grow: 1;
				}
			}
			.info-item:last-child{
				border: none;
			}
		}
	}
</style>